<template>
	<view class="feedback">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<view class="item">
				<view class="lable">姓名</view>
				<view class="value">
					<input v-model="username" type="text" placeholder="请填写您的姓名" />
				</view>
			</view>
			<view class="item">
				<view class="lable">联系方式</view>
				<view class="value">
					<input v-model="phone" placeholder="请填写手机号"></input>
				</view>
			</view>

			<textarea v-model="content" placeholder="请填写意见反馈" />

			<u-upload class="img-btn" :action="action" :formData="uploadFormData" :name="uploadName"
				:fileList="fileList"></u-upload>

		</view>

		<view class="btn" @click="submit">立即提交</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '意见反馈',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		username: '',
		phone: '',
		content: '',
		action: '',
		uploadFormData: {
			"name": "feedback"
		},
		uploadName: "feedback",
		fileList: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function submit() {
		console.log('提交数据');
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		username,
		phone,
		content,
		action,
		uploadFormData,
		uploadName,
		fileList,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $u-bg-reverse-color;
	}

	.feedback {
		padding: $m20;

		.content {
			.item {
				@include f-between;
				padding: $m32 0;
				border-bottom: 1px solid $u-border-color;

				.lable {
					width: 160rpx;
					font-weight: bold;
					color: $u-main-color;
				}

				.value {
					@include f-between;
					flex: 1;
				}

				input {
					flex: 1;
					color: $u-content-color;
				}
			}

			textarea {
				width: 100%;
				height: 240rpx;
				padding: $m12;
				background-color: $u-bg-color;
				color: $u-content-color;
				border-radius: $radius-8;
				box-sizing: border-box;
			}

			.img-btn {
				padding-top: $m12;
			}
		}

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(to right, #125cd7, #279dfa);
			color: #fff;
			text-align: center;
		}
	}
</style>